<template>
  <div class="GykjMap-hazard">
    <div class="GykjMap-hazard-table">
      <table border class="table">
        <tbody>
          <tr>
            <td>编号</td>
            <td>{{fliterData('code')}}</td>
            <td>灾点名称</td>
            <td>{{fliterData('name')}}</td>
            <td>平台类型</td>
            <td>{{fliterData('type')}}</td>

          </tr>
          <tr>
            <td>所属镇街</td>
            <td>{{fliterData('town')}}</td>
            <td>隐患点位置</td>
            <td>{{fliterData('address')}}</td>
            <td>灾害类型</td>
            <td>{{fliterData('disaster_type')}}</td>
          </tr>
          <tr>
            <td>整治计划</td>
            <td>{{fliterData('year')}}</td>
            <td>灾害规模</td>
            <td>{{fliterData('scale')}}</td>
            <td>整改措施制定和落实情况，下一步工作计划</td>
            <td>{{fliterData('type')}}</td>
          </tr>
          <tr>
            <td rowspan="2">灾害特征</td>
            <td>稳定性</td>
            <td>危害性</td>
            <td rowspan="2">威胁对象</td>
            <td>威胁人员</td>
            <td>潜在经济损失</td>
          </tr>
          <tr>
            <td>{{fliterData('dangerfeature1')}}</td>
            <td>{{fliterData('dangerfeature2')}}</td>
            <td>{{fliterData('affect_number')}}</td>
            <td>{{fliterData('lostamount')}}</td>
          </tr>
          <tr>
            <td>引发原因</td>
            <td>{{fliterData('reason')}}</td>
            <td>可能造成的影响和引发突发地质灾害的级别</td>
            <td>{{fliterData('dangerlevel')}}</td>
            <td>预案(有/无)</td>
            <td>{{fliterData('haveplanning')}}</td>
          </tr>
          <tr>
            <td>一点一档建档情况(有/无)</td>
            <td>{{fliterData('haveachives')}}</td>
            <td>可控程度（可控或较难控制）</td>
            <td>{{fliterData('control_level')}}</td>
            <td>目前已采取的工作措施</td>
            <td>{{fliterData('measure')}}</td>
          </tr>
          <tr>
            <td rowspan="2">负责领导</td>
            <td>姓名</td>
            <td>电话</td>
            <td rowspan="2">监测联系人</td>
            <td colspan="1.5">姓名</td>
            <td colspan="1.5">电话</td>
          </tr>
          <tr>
            <td>{{fliterDouData('chargeby')}}</td>
            <td>{{fliterDouData('chargeman_phone')}}</td>
            <td>{{fliterDouData('monitor')}}</td>
            <td>{{fliterDouData('monitor_phone')}}</td>
          </tr>
          <tr>
            <td rowspan="2">转移负责人</td>
            <td>姓名</td>
            <td>电话</td>
            <td rowspan="2">警戒负责人</td>
            <td colspan="1.5">姓名</td>
            <td colspan="1.5">电话</td>
          </tr>
          <tr>
            <td>{{fliterDouData('transporter')}}</td>
            <td>{{fliterDouData('transporter_phone')}}</td>
            <td>{{fliterDouData('warner')}}</td>
            <td>{{fliterDouData('warner_phone')}}</td>
          </tr>
          <tr>
            <td rowspan="2">安置负责人</td>
            <td>姓名</td>
            <td>电话</td>
            <td rowspan="2">巡查员</td>
            <td colspan="1.5">姓名</td>
            <td colspan="1.5">电话</td>
          </tr>
          <tr>
            <td>{{fliterDouData('settleby')}}</td>
            <td>{{fliterDouData('placeman_phone')}}</td>
            <td>{{fliterDouData('patroller')}}</td>
            <td>{{fliterDouData('patroller_phone')}}</td>
          </tr>
          <tr>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="5">{{fliterData('remark')}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import BaseTitle from '../../public/base-title/base-title'

export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseTitle
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {}
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-hazard {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  padding: 5px;
  .GykjMap-hazard-table {
    width: 100%;
    height: 100%;
    .table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        width: 16.666%;
        padding: 5px;
      }
    }
  }
}
</style>
